<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>整装设计案例管理</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        * {
            margin: 0;
            padding: 0;

        }
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            background-color: #CCCCCC;
        }

        .layui-card {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            /*margin: 100px auto;*/
        }
        .layui-card-header{
            background-color: #0a6aa1;
            color: white;
        }
        .layui-form{
            align-items: flex-start;
            justify-content: flex-start;
        }
    </style>
</head>
<body>

<div class="layui-card">
    <div class="layui-card-header">整体案例内容编辑</div>
    <div class="layui-card-body">
        <form class="layui-form" action="" name="whole_design_form">
            <div class="layui-form-item">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" th:value="${title}"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">子标题</label>
                <div class="layui-input-block">
                    <input type="text" name="subtitle" required lay-verify="required" placeholder="请输入子标题" th:value="${subtitle}"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">风格</label>
                <div class="layui-input-block">
                    <input type="text" name="style" required lay-verify="required" placeholder="请输入您的风格" th:value="${style}"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">案例主图</label>
                <div class="layui-input-block">
                    <img id="design_case_img" th:src="${mainimg}">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">案例内容</label>
                <div class="layui-input-block">
                    <textarea id="editor_id" name="content" style="width:100%;height:100%;" th:text="${content}"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="whele_design_btn">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>

    </div>
</div>


<!-- 你的HTML代码 -->

<script src="/layui/layui.js"></script>
<script src="kindeditor/kindeditor-all.js"></script>
<script src="kindeditor/lang/zh-CN.js"></script>
<script src="kindeditor/plugins/code/prettify.js"></script>
<script>

    KindEditor.ready(function (K) {
        window.editor = K.create('#editor_id', {
            items: ['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
                'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen',
                'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
                'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
                'anchor', 'link', 'unlink'],
            allowFileManager: true,
            filePostName: 'file',//跟服务端参数对应
            uploadJson: "/kindeditor/fileUpload",
            fileManagerJson: "/kindeditor/fileManager",//指定浏览远程图片的服务器端程序
            minHeight: 500,
            afterCreate: function () {
                let self = this;
                K.ctrl(document, 13, function () {
                    self.sync();
                    document.forms['whole_design_form'].submit();
                });
                K.ctrl(self.edit.doc, 13, function () {
                    self.sync();
                    document.forms['whole_design_form'].submit();
                });
            },
            afterUpload: function (url) {

            }
        });
    });
    //一般直接写在一个js文件中
    layui.use(['layer', 'form','upload'], function () {
        var layer = layui.layer
            ,upload = layui.upload
            , form = layui.form,$=layui.$;
        function getCookie(name) {
            var arr = document.cookie.split('; ');
            for (var i = 0; i < arr.length; i++) {
                var arr2 = arr[i].split('=');
                if (trim(arr2[0]) === name) {
                    return unescape(trim(arr2[1]));
                }
            }
            return '';
        }

        function trim(str) {
            return str.replace(/(^\s*)|(\s*$)/g, "");
        }
        function getUrlParam(name) {
            let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            let r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return unescape(r[2]); return null; //返回参数值
        }

        let id = getUrlParam('id');
        var mainimg = $('#design_case_img')[0].src;
        upload.render({
            elem: '#design_case_img'
            , url: '/layuiupload'
            , accept: 'images'
            , field: 'file'//后台接收参数名
            ,auto:false
            , acceptMime: 'image/*'
            , before: function(obj) {
                layer.load();
            }
            ,choose: function(obj){  //上传前选择回调方法
                let flag = true;
                obj.preview(function(index, file, result){

                    const img = new Image();
                    img.src = result;
                    img.onload = function () { //初始化夹在完成后获取上传图片宽高，判断限制上传图片的大小。
                        if(img.width == 750){
                            $('#design_case_img').attr('src', result);
                            obj.upload(index, file); //满足条件调用上传方法
                        }else{
                            flag = false;
                            layer.msg("您上传的小图大小宽度必须是750像素");
                            return false;
                        }
                    }
                    return flag;
                });
            }
            , done: function (res) {
                layer.closeAll('loading');
                mainimg = res.data.src;
            }
        });
        //监听提交
        form.on('submit(whele_design_btn)', function (data) {
            var field = data.field;
            field.content = editor.html();
            field.userId = getCookie("telphone");
            field.mainimg = mainimg;
            field.id = id;
            $.post('/api/edit_whole_design_case',field,function (resp) {
               console.log(resp);

                parent.layui.table.reload('designcase_table'); //重载表格

                //关闭自身弹窗
                const index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭
            });
            return false;
        });

    });
</script>
</body>
</html>